<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" :title="!queryParams.id ?'添加工厂' : '修改工厂'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="form" :rules="dataRule" ref="form" label-width="120px">
      <el-form-item label="工厂名称" prop="title">
        <el-input v-model="form.title" show-word-limit :maxlength="20" placeholder="请输入工厂名称" clearable />
      </el-form-item>
      <el-form-item label="联系人" prop="subtitle">
        <el-input v-model="form.subtitle" show-word-limit placeholder="请输入联系人" clearable />
      </el-form-item>
      <el-form-item label="电话" prop="subtitle">
        <el-input v-model="form.subtitle" show-word-limit placeholder="请输入电话" clearable />
      </el-form-item>
      <el-form-item label="省市区" prop="areaId">
        <selectCity @getValue="getValue"></selectCity>
      </el-form-item>
      <el-form-item label="街道" prop="street">
        <el-input v-model="form.street" placeholder="请输入街道" />
      </el-form-item>
       <el-form-item label="地址" prop="address" class="input_btn">
        <el-input v-model="form.address" disabled placeholder="请选择地址">
          <el-button slot="suffix" type="primary" @click="addressHandle">请选择地址</el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
     <!-- 弹窗, 选择经纬度 -->
    <choose-address v-if="mapShow" ref="chooseAddress" @refreshAddressPosition="getAddressPosition"></choose-address>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data() {
    return {
      visible: false,
      form: {
        title: '',
        subtitle: '',
        image: '',
        weigh: '',
        switchFlag: 0,
        topSwitch: 0,
        homeSwitch: 0,
      },
      confirmLoading: false,
      queryParams: {},
      mapShow:false
    }
  },

  computed: {
    dataRule() {
      return {
        title: [
          { required: true, message: '请输入名称', trigger: 'change' }
        ],
      }

    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.reset()
        this.confirmLoading = false
        this.form.id = this.queryParams.id ? this.queryParams.id : ''
        this.queryParams.id ? this.getInfo() : ''
      })
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        title: '',
        subtitle: '',
        image: '',
        weigh: '',
        switchFlag: 0,
        topSwitch: 0,
        homeSwitch: 0,
      };
    },
     // 点击获取地址
  addressHandle() {
    this.mapShow = true
    this.$nextTick(() => {
      this.$refs.chooseAddress.init()
      this.$refs.chooseAddress.centerMarker = this.form.lng ? [this.form.lng, this.form.lat] : [119.542197, 39.943673]
      this.$refs.chooseAddress.address = this.form.address ? this.form.address : '河北省洁客科技有限公司'
    })
  },
    // 获取定位坐标
  getAddressPosition(position, address) {
    this.form.lat = position.lat
    this.form.lng = position.lng
    this.form.address = address
  },
    // 获取省市区组件的传参
    getValue(value){
      this.form.areaId=value.areaId
      this.form.city=value.city
    },
    // 获取信息
    getInfo() {
      const id = this.queryParams.id
      getDeliverMember(id).then(response => {
        this.form = response.data;
      });
    },
    // 表单提交
    formSubmitHandle: debounce(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (this.form.id != '') {
            this.form.maintainflag = false
            updateDeliverMember(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.visible = false
              this.confirmLoading = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.confirmLoading = false
            });
          } else {
            addDeliverMember(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.visible = false
              this.confirmLoading = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.confirmLoading = false
            });
          }
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
#J_quillEditor {
  min-height: 400px;
}
</style>
